Ionic এর মধ্যে Animations এবং Transitions

Ionic Animations এবং Transitions হল UI (User Interface) অঙ্গভূষা যা অ্যাপ্লিকেশনকে আরো আকর্ষণীয় এবং ব্যবহারকারী বান্ধব করে তোলে। Ionic অ্যাপে অ্যানিমেশন এবং ট্রানজিশন ব্যবহার করে আপনি ফিচারগুলিকে আরও সজীব এবং ইন্টারেক্টিভ করতে পারেন। Ionic এর মধ্যে দুটি প্রধান ধরনের অ্যানিমেশন ব্যবহৃত হয়: CSS Animations এবং Ionic Animations API।

১. CSS Animations in Ionic

Ionic অ্যাপে CSS Animations ব্যবহার করা সাধারণত সবচেয়ে সহজ এবং দ্রুত উপায়। CSS Animations আপনাকে যেকোনো DOM উপাদানের জন্য অ্যানিমেশন নির্ধারণ করতে দেয়।

১.১ CSS Animation Example:

<ion-header>
  <ion-toolbar>
    <ion-title>Animations</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="animate-box">
    <p>This box will animate</p>
  </div>
</ion-content>

CSS:

.animate-box {
  width: 200px;
  height: 200px;
  background-color: #3880ff;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: move 2s infinite alternate;
}

@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

এখানে:

• @keyframes: এটি অ্যানিমেশন নির্ধারণ করে, যেমন move অ্যানিমেশনটি বক্সটিকে এক স্থান থেকে অন্য স্থানে সরাবে।
• animation: এটি অ্যানিমেশনটি চালু করার জন্য ব্যবহৃত হয়।

২. Ionic Animations API

Ionic Framework একটি Animations API প্রদান করে, যা আপনাকে জটিল অ্যানিমেশন এবং ট্রানজিশন তৈরি করতে সহায়তা করে। Ionic Animations API ব্যবহারে আপনি শক্তিশালী কাস্টম অ্যানিমেশন তৈরি করতে পারেন।

২.১ Ionic Animations API উদাহরণ:

Ionic Animations API ব্যবহার করার জন্য, আপনাকে AnimationController এবং Animation ব্যবহার করতে হয়।

1. Animation Service ইনজেক্ট করা:

import { Component } from '@angular/core';
import { AnimationController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(private animationCtrl: AnimationController) {}

  animateElement() {
    const animation = this.animationCtrl.create()
      .addElement(document.querySelector('.animate-box'))
      .duration(1000)
      .iterations(1)
      .keyframes([
        { offset: 0, transform: 'scale(1)' },
        { offset: 1, transform: 'scale(1.5)' }
      ]);
    
    animation.play();
  }
}

2. HTML:

<ion-header>
  <ion-toolbar>
    <ion-title>Animations with API</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="animate-box" (click)="animateElement()">
    <p>Click me to animate</p>
  </div>
</ion-content>

এখানে:

• addElement(): এটি অ্যানিমেশনটি কোন DOM উপাদানে প্রয়োগ করা হবে তা নির্ধারণ করে।
• duration(): অ্যানিমেশনটির সময়কাল নির্ধারণ করে।
• keyframes(): এটি অ্যানিমেশনটির বিভিন্ন স্টেপ (keyframe) নির্ধারণ করে।

৩. Transitions in Ionic

Transitions হল UI উপাদানগুলির মধ্যে অ্যানিমেটেড পরিবর্তন যা এক পেজ থেকে অন্য পেজে যাওয়ার সময় বা UI উপাদানের মধ্যে ঘটে। Ionic-এ Page Transitions এবং Element Transitions ব্যবহৃত হয়।

৩.১ Ionic Page Transitions

Ionic অ্যাপে পেজ ট্রানজিশন সাধারণত Angular Router এবং Ionic’s NavController ব্যবহারের মাধ্যমে করা হয়। এটি আপনাকে এক পেজ থেকে অন্য পেজে অ্যানিমেটেডভাবে যেতে সহায়তা করে।

Page Transition Example:

1. Page Navigation:

import { NavController } from '@ionic/angular';

constructor(private navCtrl: NavController) {}

goToAboutPage() {
  this.navCtrl.navigateForward('/about');
}

2. Page Transitions:

Ionic ফ্রেমওয়ার্কে পেজ ট্রানজিশনগুলো ডিফল্টভাবে অ্যানিমেটেড হয়। তবে আপনি ট্রানজিশনের টাইপ পরিবর্তন করতে পারেন:

this.navCtrl.navigateForward('/about', {
  animation: 'ios-transition'
});

এখানে:

• ios-transition: এটি iOS স্টাইলের ট্রানজিশন অ্যাপ্লাই করবে।
• md-transition: এটি Android স্টাইলের ট্রানজিশন অ্যাপ্লাই করবে।

৩.২ Element Transitions

Ionic-এ এলিমেন্ট ট্রানজিশনগুলি @angular/animations লাইব্রেরি বা CSS Transitions ব্যবহার করে করা যায়।

CSS Transition Example:

.animate-box {
  transition: transform 0.5s ease-in-out;
}

.animate-box:hover {
  transform: scale(1.2);
}

এখানে:

• transition: এটি একটি CSS প্রপার্টি যা এলিমেন্টের জন্য ট্রানজিশন ব্যবহার করতে সাহায্য করে।

৪. Ionic-এর সাথে 3D Animations

Ionic অ্যাপে 3D অ্যানিমেশনগুলো CSS3 এবং Transform প্রপার্টি ব্যবহার করে করা যেতে পারে।

৪.১ 3D Animation Example:

.animate-box {
  width: 200px;
  height: 200px;
  background-color: #3880ff;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.5s ease;
}

.animate-box:hover {
  transform: rotateY(180deg);
}

এখানে:

• rotateY(180deg): এটি বক্সটিকে 3D স্পেসে ঘোরায়।

সারাংশ

Ionic Animations এবং Transitions অ্যাপ্লিকেশনের ইউজার ইন্টারফেসে জীবন্ততা এবং ইন্টারেকটিভিটি যোগ করে। আপনি CSS Animations ব্যবহার করে সহজ অ্যানিমেশন তৈরি করতে পারেন এবং Ionic Animations API ব্যবহার করে জটিল এবং কাস্টম অ্যানিমেশন তৈরি করতে পারেন। Ionic ফ্রেমওয়ার্ক পেজ ট্রানজিশন এবং এলিমেন্ট ট্রানজিশনের জন্য বিভিন্ন অ্যানিমেশন এবং ট্রানজিশন সাপোর্ট করে, যা ব্যবহারকারীর অভিজ্ঞতাকে আরও উন্নত করে তোলে।

Ionic এর Animations সিস্টেম ব্যবহারকারীর ইন্টারফেসকে আরো সজীব এবং ইন্টারেক্টিভ করতে সাহায্য করে। অ্যাপ্লিকেশনগুলির মধ্যে অ্যানিমেশন ব্যবহার করা UI এর এক্সপেরিয়েন্স উন্নত করে এবং ব্যবহারকারীদের জন্য আকর্ষণীয় করে তোলে। Ionic এর অ্যানিমেশন সিস্টেমটি মূলত CSS এবং JavaScript এর মাধ্যমে পরিচালিত হয়, তবে Ionic এর নিজস্ব Animation API ব্যবহার করে আপনি আরো কাস্টম অ্যানিমেশন তৈরি করতে পারবেন।

নিচে Ionic এর অ্যানিমেশন সিস্টেম, এর ব্যবহার এবং কাস্টম অ্যানিমেশন তৈরির প্রক্রিয়া বিস্তারিতভাবে আলোচনা করা হলো।

1. CSS Animations in Ionic

Ionic ফ্রেমওয়ার্কের মধ্যে CSS অ্যানিমেশনগুলি ব্যবহৃত হয়, যা আপনাকে সহজেই বিভিন্ন ভিজ্যুয়াল পরিবর্তন যেমন পজিশন, রঙ, স্কেল, বা অন্য যেকোনো স্টাইল পরিবর্তন করতে সহায়তা করে।

১.১ Basic CSS Animation Example

<ion-button id="animateButton">Click Me</ion-button>

#animateButton {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

এখানে, একটি bounce অ্যানিমেশন তৈরি করা হয়েছে যা 2 সেকেন্ডে একবার সম্পন্ন হয় এবং একে বারবার চলতে থাকে।

2. Ionic Animation API (JavaScript Animations)

Ionic ফ্রেমওয়ার্কের একটি শক্তিশালী অ্যানিমেশন API আছে যা আপনাকে জাভাস্ক্রিপ্টের মাধ্যমে অ্যানিমেশন তৈরি এবং নিয়ন্ত্রণ করতে সহায়তা করে। এই API দিয়ে আপনি AnimationController ব্যবহার করে উন্নত অ্যানিমেশন তৈরি করতে পারবেন।

২.১ Animation Controller Setup

প্রথমে, Ionic অ্যাপে অ্যানিমেশন কন্ট্রোলার ইনস্টল করতে হবে:

import { AnimationController } from '@ionic/angular';

২.২ Basic Animation Example

import { Component, OnInit } from '@angular/core';
import { AnimationController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {

  constructor(private animationCtrl: AnimationController) {}

  ngOnInit() {
    const buttonAnimation = this.animationCtrl.create()
      .addElement(document.querySelector('#animateButton'))
      .duration(1000)
      .iterations(Infinity)
      .keyframes([
        { offset: 0, transform: 'translateY(0)' },
        { offset: 0.5, transform: 'translateY(-10px)' },
        { offset: 1, transform: 'translateY(0)' }
      ]);

    buttonAnimation.play();
  }
}

এটি একটি অ্যানিমেশন তৈরি করবে যেখানে বাটনটি উপরে উঠে যাবে এবং তারপর তার অবস্থানে ফিরে আসবে, এবং এটি বারবার চলতে থাকবে। এখানে, duration নির্ধারণ করে অ্যানিমেশনের সময়কাল, এবং iterations নির্ধারণ করে কতবার অ্যানিমেশনটি পুনরাবৃত্তি হবে।

3. Ionic Transitions

Ionic অ্যাপ্লিকেশনে পেজ ট্রানজিশনগুলোও অ্যানিমেশন হিসেবে কাজ করে। Ionic এর ডিফল্ট ট্রানজিশনগুলি CSS অ্যানিমেশন দ্বারা সম্পাদিত হয়। আপনি পেজ ট্রানজিশন কাস্টমাইজ করতে পারবেন Navigation সিস্টেমের মাধ্যমে।

৩.১ Custom Transitions

import { AnimationController } from '@ionic/angular';

constructor(private animationCtrl: AnimationController) {}

ionViewWillEnter() {
  const animation = this.animationCtrl.create()
    .addElement(document.querySelector('.my-element'))
    .duration(500)
    .easing('ease-in-out')
    .fromTo('opacity', '0', '1')
    .fromTo('transform', 'scale(0.5)', 'scale(1)');
    
  animation.play();
}

এখানে, একটি পেজের ভিজ্যুয়াল এলিমেন্টের জন্য অ্যানিমেশন তৈরি করা হয়েছে, যাতে এটি ধীরে ধীরে দৃশ্যমান হয়ে উঠে এবং আকারে বড় হয়।

4. Ionic Gesture-based Animations

Ionic-এ gestures ব্যবহার করে আপনি ইন্টারেক্টিভ অ্যানিমেশন তৈরি করতে পারেন, যেমন ট্যাপ, স্লাইড, স্ক্রল ইত্যাদি।

৪.১ Gesture Controller Example

import { GestureController } from '@ionic/angular';

constructor(private gestureCtrl: GestureController) {}

ngOnInit() {
  const gesture = this.gestureCtrl.create({
    el: document.querySelector('#swipeElement'),
    gestureName: 'swipe',
    onStart: ev => {
      console.log('Swipe started', ev);
    },
    onEnd: ev => {
      console.log('Swipe ended', ev);
    }
  });

  gesture.enable();
}

এই কোডটি একটি এলিমেন্টে swipe গেস্টার কন্ট্রোল তৈরি করবে। যখন ব্যবহারকারী এলিমেন্টটি স্লাইড করবে, তখন সেখান থেকে একটি ইভেন্ট ট্রিগার হবে।

5. Ionic Animation Performance Tips

অ্যানিমেশন ব্যবহারের সময় পারফরম্যান্স নিশ্চিত করা খুবই গুরুত্বপূর্ণ। কিছু পদ্ধতি আছে যা অ্যানিমেশন পারফরম্যান্স বাড়াতে সহায়ক হতে পারে:

• Transform এবং Opacity পরিবর্তন করুন, কারণ এগুলো কম কম্পিউটেশনাল এবং CSS GPU acceleration ব্যবহার করে।
• Animations এবং Transitions এ ease-out বা ease-in-out ব্যবহার করুন যেগুলি ব্যবহারকারীকে স্নিগ্ধ অভিজ্ঞতা দেয়।
• অ্যানিমেশনটি সম্পূর্ণ হওয়ার পর, তা থামানোর জন্য animation.end ব্যবহার করুন।

সারাংশ

Ionic এর অ্যানিমেশন সিস্টেম CSS এবং JavaScript উভয় পদ্ধতিতে অ্যানিমেশন তৈরি করার সুবিধা দেয়। CSS অ্যানিমেশন দ্রুত এবং সহজ, তবে Ionic Animation API দিয়ে আপনি আরও জটিল এবং কাস্টম অ্যানিমেশন তৈরি করতে পারেন। Ionic Transitions এবং Gesture-based Animations আরও ইন্টারেক্টিভ এবং ব্যবহারকারী বন্ধুত্বপূর্ণ অভিজ্ঞতা তৈরি করতে সাহায্য করে। Ionic এর অ্যানিমেশন সিস্টেমে আপনার অ্যাপের ইন্টারফেসকে সুন্দর এবং সজীব করা সম্ভব।

CSS Animations এবং **CSS Transitions হলো দুটি শক্তিশালী টুল যা ওয়েব ডেভেলপমেন্টে ব্যবহারকারীর ইন্টারঅ্যাকশনের মাধ্যমে সাইটে গতিশীলতা (motion) এবং পরিবর্তন (change) আনে। এই দুটি ফিচার একসাথে ব্যবহার করলে ওয়েবসাইটের ব্যবহারকারী অভিজ্ঞতা (UX) উন্নত হয় এবং ওয়েবসাইটটি আরও ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় হয়ে ওঠে।

নিচে CSS Animations এবং CSS Transitions এর ব্যবহার এবং উদাহরণ দেওয়া হলো।

১. CSS Transitions

CSS Transition ব্যবহার করে আপনি একটি CSS property এর মানে পরিবর্তন ঘটানোর সময় একটি নির্দিষ্ট সময় (duration) ধরে অ্যানিমেশন বা পরিবর্তন ঘটাতে পারেন। এটি সাধারণত যখন কোনো ইলিমেন্টের স্টাইল পরিবর্তিত হয় তখন একটি স্মুথ ট্রানজিশন বা পরিবর্তন প্রদর্শন করতে ব্যবহৃত হয়।

CSS Transition এর সিনট্যাক্স:

selector {
  transition: property duration timing-function delay;
}

• property: যে CSS প্রপার্টির জন্য ট্রানজিশন হবে (যেমন: background-color, width, height ইত্যাদি)।
• duration: ট্রানজিশনটি কত সময় নেবে (যেমন: 2s, 500ms)।
• timing-function: ট্রানজিশনটির গতির গতি নির্ধারণ করে (যেমন: ease, linear, ease-in, ease-out)।
• delay: ট্রানজিশন শুরু হতে কত সময় লাগবে (যেমন: 0s, 1s)।

উদাহরণ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Transition Example</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: blue;
      transition: background-color 1s ease-in-out, transform 1s ease;
    }

    .box:hover {
      background-color: red;
      transform: rotate(45deg);
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

ব্যাখ্যা:

• .box এর background-color এবং transform প্রপার্টিতে ট্রানজিশন প্রয়োগ করা হয়েছে।
• যখন .box-এ হোভার করা হবে, তখন এর রঙ পরিবর্তন হবে এবং একটি ঘূর্ণন (rotate) হবে।
• ট্রানজিশন ১ সেকেন্ডে হবে এবং ease-in-out টাইমিং ফাংশন ব্যবহার করা হয়েছে।

২. CSS Animations

CSS Animations ব্যবহার করে আপনি একটি নির্দিষ্ট ইলিমেন্টের বিভিন্ন স্টাইল পরিবর্তন করতে পারেন, যা একাধিক পর্যায়ে ঘটে এবং আপনি এটি একটি নির্দিষ্ট সময়কাল ধরে নিয়ন্ত্রণ করতে পারেন। এতে @keyframes Rule ব্যবহৃত হয়, যা স্টাইলের ধাপ (steps) নির্ধারণ করে।

CSS Animation এর সিনট্যাক্স:

selector {
  animation: animation-name duration timing-function delay iteration-count direction;
}

@keyframes animation-name {
  from {
    /* Initial state */
  }
  to {
    /* Final state */
  }
}

• animation-name: অ্যানিমেশনটির নাম।
• duration: অ্যানিমেশনটি কত সময় নেবে (যেমন: 2s, 500ms)।
• timing-function: অ্যানিমেশনের গতির গতি (যেমন: ease, linear, ease-in, ease-out)।
• delay: অ্যানিমেশনটি শুরু হতে কত সময় লাগবে (যেমন: 0s, 1s)।
• iteration-count: অ্যানিমেশনটি কতবার চলবে (যেমন: infinite, 3, 1 ইত্যাদি)।
• direction: অ্যানিমেশনটির দিক নির্ধারণ করে (যেমন: normal, reverse, alternate)।

উদাহরণ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Animation Example</title>
  <style>
    .circle {
      width: 100px;
      height: 100px;
      background-color: blue;
      border-radius: 50%;
      animation: moveCircle 3s ease-in-out infinite;
    }

    @keyframes moveCircle {
      0% {
        transform: translateX(0);
        background-color: blue;
      }
      50% {
        transform: translateX(200px);
        background-color: red;
      }
      100% {
        transform: translateX(0);
        background-color: blue;
      }
    }
  </style>
</head>
<body>
  <div class="circle"></div>
</body>
</html>

ব্যাখ্যা:

• এখানে .circle নামক একটি বৃত্ত তৈরি করা হয়েছে।
• অ্যানিমেশনটি moveCircle নামের কিবাফ্রেম ব্যবহার করে, যা বৃত্তটিকে এক স্থান থেকে অন্য স্থানে নিয়ে যাবে এবং এর রঙ পরিবর্তন করবে।
• অ্যানিমেশনটি ৩ সেকেন্ডে সম্পন্ন হবে এবং এটি বারবার (infinite) চলবে।

৩. CSS Transitions vs CSS Animations

৪. মিশ্রিত উদাহরণ: CSS Animation এবং Transition ব্যবহার

আপনি CSS Animation এবং CSS Transition একসাথে ব্যবহার করতে পারেন একাধিক ধরনের অ্যানিমেশন এবং ট্রানজিশন তৈরি করতে। উদাহরণস্বরূপ, একটি বাটন হোভার করার সময় প্রথমে একটি ট্রানজিশন এবং পরে একটি অ্যানিমেশন শুরু হতে পারে।

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Combined Example</title>
  <style>
    button {
      background-color: blue;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      transition: transform 0.3s ease-in-out, background-color 0.3s ease;
    }

    button:hover {
      background-color: red;
      transform: scale(1.2);
    }

    @keyframes pulse {
      0% {
        box-shadow: 0 0 10px blue;
      }
      50% {
        box-shadow: 0 0 20px red;
      }
      100% {
        box-shadow: 0 0 10px blue;
      }
    }

    button:active {
      animation: pulse 0.5s infinite;
    }
  </style>
</head>
<body>
  <button>Click Me</button>
</body>
</html>

ব্যাখ্যা:

• বাটনটি হোভার হলে একটি ট্রানজিশন শুরু হবে, যা বাটনের রঙ এবং সাইজ পরিবর্তন করবে।
• বাটনটি ক্লিক (active) হলে একটি অ্যানিমেশন শুরু হবে, যা বাটনের চারপাশে একটি জ্বলন্ত (pulse) ইফেক্ট তৈরি করবে।

উপসংহার

• CSS Transitions ব্যবহার করে আপনি সহজভাবে এক বা একাধিক CSS প্রপার্টির পরিবর্তনকে স্মুথ ট্রানজিশন তৈরি করতে পারেন, যা ব্যবহারকারীর ইন্টারঅ্যাকশনের সাথে ঘটে।
• CSS Animations আরও জটিল এবং রিচ অ্যানিমেশন তৈরি করতে সাহায্য করে, যা বিভিন্ন ধাপে এবং বিভিন্ন সময়সীমায় পরিবর্তন ঘটাতে পারে।

এই দুটি প্রযুক্তি একসাথে ব্যবহার করলে ওয়েবসাইট বা অ্যাপ্লিকেশন অনেক বেশি ই

ন্টারঅ্যাকটিভ এবং আকর্ষণীয় হয়ে ওঠে, যা ব্যবহারকারীদের ভাল অভিজ্ঞতা প্রদান করে।

Ionic অ্যাপে Complex Animations তৈরি করা খুবই সহজ, কারণ Ionic প্ল্যাটফর্মে অনেক ধরনের অ্যানিমেশন সহজেই ইমপ্লিমেন্ট করা যায়। Ionic ব্যবহার করে আপনি CSS অথবা JavaScript (Angular Animation) এর মাধ্যমে কমপ্লেক্স অ্যানিমেশন তৈরি করতে পারেন। এখানে আমরা কিছু সাধারণ এবং কমপ্লেক্স অ্যানিমেশন তৈরির প্রক্রিয়া দেখব।

১. Ionic CSS Animations

Ionic CSS Animations ব্যবহার করে সহজভাবে অ্যানিমেশন তৈরি করা যেতে পারে। সাধারণত আপনি CSS এর @keyframes বা transition প্রোপার্টি ব্যবহার করে অ্যানিমেশনগুলো নিয়ন্ত্রণ করতে পারেন।

১.১ Fade In এবং Fade Out Animations

ফেড ইন এবং ফেড আউট একটি সাধারণ অ্যানিমেশন, যা CSS দিয়ে খুব সহজে তৈরি করা যায়।

home.page.scss ফাইলে:

.fade-in {
  animation: fadeIn 2s ease-in-out forwards;
}

.fade-out {
  animation: fadeOut 2s ease-in-out forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

home.page.html ফাইলে:

<ion-content>
  <div [ngClass]="isVisible ? 'fade-in' : 'fade-out'">
    <p>This content will fade in and out</p>
  </div>
  <ion-button (click)="toggleVisibility()">Toggle Fade</ion-button>
</ion-content>

home.page.ts ফাইলে:

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage {
  isVisible = true;

  toggleVisibility() {
    this.isVisible = !this.isVisible;
  }
}

এখানে:

• @keyframes দিয়ে ফেড ইন এবং ফেড আউট অ্যানিমেশন তৈরি করা হয়েছে।
• ngClass দিয়ে ক্লাস পরিবর্তন করে অ্যানিমেশন চালানো হচ্ছে।

২. Ionic Animations with Angular Animations

Ionic অ্যাপে Angular Animations ব্যবহার করে আরও কমপ্লেক্স অ্যানিমেশন তৈরি করা সম্ভব। Angular Animations এর মাধ্যমে আপনি ট্রানজিশন, স্টেট পরিবর্তন এবং বিভিন্ন অ্যানিমেশন ইফেক্ট তৈরি করতে পারবেন।

২.১ Angular Animations সেটআপ

প্রথমে আপনাকে @angular/animations মডিউলটি ইম্পোর্ট করতে হবে:

app.module.ts ফাইলে:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [...],
  imports: [
    ...,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

২.২ Bounce Animation Example

এখন, আমরা একটি Bounce অ্যানিমেশন তৈরি করব যা একটি বাটন ক্লিক করলে দৃশ্যমান হবে।

home.page.ts ফাইলে:

import { Component } from '@angular/core';
import { trigger, transition, style, animate, keyframes } from '@angular/animations';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
  animations: [
    trigger('bounce', [
      transition('void => *', [
        animate('1s ease-in', keyframes([
          style({ transform: 'translateY(0)', offset: 0 }),
          style({ transform: 'translateY(-30px)', offset: 0.5 }),
          style({ transform: 'translateY(0)', offset: 1 })
        ]))
      ])
    ])
  ]
})
export class HomePage {
  showElement = false;

  toggleBounce() {
    this.showElement = !this.showElement;
  }
}

home.page.html ফাইলে:

<ion-content>
  <div *ngIf="showElement" [@bounce]>
    <ion-button>Bounce Button</ion-button>
  </div>
  <ion-button (click)="toggleBounce()">Toggle Bounce</ion-button>
</ion-content>

এখানে:

• keyframes ব্যবহার করে বাউন্স অ্যানিমেশন তৈরি করা হয়েছে।
• void => * ট্রানজিশন দিয়ে এলিমেন্টের উপস্থিতি এবং অদৃশ্য হওয়ার সময় অ্যানিমেশন অ্যাপ্লাই করা হচ্ছে।

৩. Ionic Native Animations (Ionics' Animation API)

Ionic 4 এবং পরবর্তী ভার্সনে Ionic Animation API সরাসরি মোবাইল অ্যাপ্লিকেশনগুলিতে অ্যানিমেশন যোগ করার জন্য একটি শক্তিশালী উপায়। এটি Angular এর সাথে সহজে কাজ করে।

৩.১ Ionic Animation API ব্যবহার করা

home.page.ts ফাইলে:

import { Component } from '@angular/core';
import { AnimationController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage {
  constructor(private animationCtrl: AnimationController) {}

  triggerAnimation() {
    const animation = this.animationCtrl.create()
      .addElement(document.querySelector('.box'))
      .duration(1000)
      .iterations(1)
      .keyframes([
        { offset: 0, transform: 'scale(0)' },
        { offset: 0.5, transform: 'scale(1.2)' },
        { offset: 1, transform: 'scale(1)' },
      ]);

    animation.play();
  }
}

home.page.html ফাইলে:

<ion-content>
  <div class="box" style="width: 100px; height: 100px; background-color: red;"></div>
  <ion-button (click)="triggerAnimation()">Trigger Animation</ion-button>
</ion-content>

এখানে:

• AnimationController ব্যবহার করে একটি এলিমেন্টে স্কেল অ্যানিমেশন তৈরি করা হয়েছে।
• keyframes এর মাধ্যমে অ্যানিমেশন কীগুলি এবং ট্রানজিশন টাইম সেট করা হয়েছে।

৪. Advanced Animations: Sequence of Animations

আপনি একাধিক অ্যানিমেশন একসাথে বা নির্দিষ্ট সময়ে একে একে চালাতে পারেন। উদাহরণস্বরূপ, আমরা দুটি অ্যানিমেশন একসাথে চালাবো।

home.page.ts ফাইলে:

import { Component } from '@angular/core';
import { AnimationController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage {
  constructor(private animationCtrl: AnimationController) {}

  triggerMultipleAnimations() {
    const animation1 = this.animationCtrl.create()
      .addElement(document.querySelector('.box1'))
      .duration(1000)
      .keyframes([
        { offset: 0, transform: 'translateX(0)' },
        { offset: 1, transform: 'translateX(200px)' },
      ]);

    const animation2 = this.animationCtrl.create()
      .addElement(document.querySelector('.box2'))
      .duration(1000)
      .keyframes([
        { offset: 0, transform: 'translateY(0)' },
        { offset: 1, transform: 'translateY(200px)' },
      ]);

    animation1.play();
    animation2.play();
  }
}

home.page.html ফাইলে:

<ion-content>
  <div class="box1" style="width: 100px; height: 100px; background-color: red; margin-bottom: 10px;"></div>
  <div class="box2" style="width: 100px; height: 100px; background-color: blue;"></div>
  <ion-button (click)="triggerMultipleAnimations()">Trigger Multiple Animations</ion-button>
</ion-content>

এখানে:

• দুটি আলাদা অ্যানিমেশন একসাথে চালানো হয়েছে।
• একে একে বা একসাথে অ্যানিমেশন চালানোর জন্য play() ফাংশন ব্যবহার করা হয়েছে।

সারাংশ

• CSS Animations সহজ এবং দ্রুত অ্যানিমেশন তৈরি করতে ব্যবহৃত হয়, যেমন ফেড ইন/আউট, স্কেল, রোটেট ইত্যাদি।
• Angular Animations আরও কমপ্লেক্স এবং কাস্টম অ্যানিমেশন তৈরি করতে ব্যবহৃত হয়, যেমন বাউন্স, স্লাইড, শেক ইত্যাদি।
• Ionic Animation API ব্যবহার করে মোবাইল অ্যাপ্লিকেশনগুলিতে অত্যাধুনিক অ্যানিমেশন তৈরি করা যেতে পারে, যা দ্রুত এবং শক্তিশালী।
• Animation Sequences এর মাধ্যমে একাধিক অ্যানিমেশন একসাথে বা সময়মতো চালানো যেতে পারে।

এগুলি ছিল Ionic অ্যাপে Complex Animations তৈরি করার প্রক্রিয়া।

Ionic অ্যাপ্লিকেশনগুলিতে gesture control এবং custom animations ব্যবহার করে ইউজার ইন্টারঅ্যাকশন এবং ভিজ্যুয়াল অভিজ্ঞতা বৃদ্ধি করা যায়। Gesture control মোবাইল ডিভাইসে বিভিন্ন ফিজিক্যাল ইন্টারঅ্যাকশন (যেমন ট্যাপ, স্লাইড, স্ক্রোল) পরিচালনা করতে ব্যবহৃত হয় এবং Custom Animations ব্যবহারকারীকে একটি আকর্ষণীয়, ইন্টারেক্টিভ অভিজ্ঞতা দেয়। Ionic তার নিজস্ব Gesture Controller এবং Animation API প্রদান করে, যা এই কাজগুলো করতে সাহায্য করে।

এখানে Gesture Control এবং Custom Animations এর সাথে কাজ করার বিস্তারিত ব্যাখ্যা দেয়া হলো।

১. Gesture Control Ionic অ্যাপে

Ionic Gesture Controller এর মাধ্যমে আপনি বিভিন্ন ধরনের জেসচার (যেমন ট্যাপ, ড্র্যাগ, স্লাইড, পিন্চ ইত্যাদি) শনাক্ত করতে পারেন এবং এগুলোর উপর নির্ভর করে অ্যাপ্লিকেশন প্রতিক্রিয়া দিতে পারেন।

১.১ Gesture API ইনস্টল করা

Ionic এ Gesture Control ব্যবহার করতে @ionic/angular এবং @ionic/core প্যাকেজ প্রয়োজন। সাধারণত, Ionic স্ট্যান্ডার্ড ইন্সটলেশনের মাধ্যমে এগুলি অন্তর্ভুক্ত থাকে, তবে যদি না থাকে, তবে আপনি নিচের কমান্ড ব্যবহার করে এই প্যাকেজগুলো ইনস্টল করতে পারেন:

npm install @ionic/angular @ionic/core

১.২ Gesture Controller ব্যবহার করা

Ionic GestureController ব্যবহার করে আপনি বিভিন্ন ধরনের জেসচার রেকগনাইজ করতে পারেন। নিচে একটি উদাহরণ দেয়া হলো যেখানে Tap এবং Swipe জেসচার ব্যবহার করা হয়েছে:

import { Component, OnInit } from '@angular/core';
import { GestureController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {

  constructor(private gestureCtrl: GestureController) {}

  ngOnInit() {
    // Gesture সৃষ্টির জন্য GestureController ব্যবহার করা
    const gesture = this.gestureCtrl.create({
      el: document.querySelector('.swipe-area'), // এলিমেন্ট যেখানে জেসচার কার্যকরী হবে
      gestureName: 'swipe',
      onStart: () => {
        console.log('Swipe started');
      },
      onMove: (ev) => {
        console.log('Swiping:', ev.deltaX); // ডেল্টা (শুরু থেকে অবস্থা) পরিমাপ করা হচ্ছে
      },
      onEnd: (ev) => {
        if (ev.deltaX > 50) {
          console.log('Swiped right!');
        } else {
          console.log('Swipe did not meet threshold');
        }
      }
    });

    // Gesture শুরু করা
    gesture.enable();
  }
}

এখানে:

• create() মেথড দিয়ে একটি গেস্টার তৈরি করা হয়েছে এবং এর মধ্যে onStart, onMove, এবং onEnd ইভেন্টগুলো হ্যান্ডেল করা হয়েছে।
• Swipe gesture শুরুর অবস্থান, চলমান অবস্থান এবং শেষ অবস্থান চেক করা হচ্ছে।

১.৩ অন্যান্য Gesture Types

Ionic এর Gesture Controller বেশ কয়েকটি জেসচার সাপোর্ট করে:

• Tap: একটি ট্যাপ শনাক্ত করা।
• Swipe: একটি স্লাইড (ডান/বাম) শনাক্ত করা।
• Pinch: দুটি আঙ্গুল দিয়ে স্কেল পরিবর্তন শনাক্ত করা।
• Rotate: দুটি আঙ্গুল দিয়ে ঘোরানো শনাক্ত করা।
• Pan: ড্র্যাগিং বা স্ক্রলিং শনাক্ত করা।

২. Custom Animations Ionic অ্যাপে

Ionic অ্যাপে কাস্টম অ্যানিমেশন তৈরি করতে Angular এর Animation API ব্যবহার করা যেতে পারে, যা মোবাইল অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাক্টিভ এবং আকর্ষণীয় করে তোলে।

২.১ Ionic Animation API ব্যবহার করা

Ionic 4 থেকে Angular Animation API এর সাথে সম্পূর্ণ সমর্থন প্রদান করেছে, যা CSS এবং JavaScript উভয় মাধ্যমে অ্যানিমেশন পরিচালনা করতে পারে।

প্রথমে, @angular/animations প্যাকেজ ইনস্টল করতে হবে:

npm install @angular/animations

২.২ Angular Animation Module ইম্পোর্ট করা

আপনার app.module.ts ফাইলে BrowserAnimationsModule ইম্পোর্ট করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IonicModule } from '@ionic/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    BrowserAnimationsModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

২.৩ Custom Animation তৈরি করা

Ionic অ্যাপে একটি কাস্টম অ্যানিমেশন তৈরি করার জন্য Angular Animation API ব্যবহার করা হয়। এখানে একটি উদাহরণ দেয়া হলো যেখানে একটি কম্পোনেন্টে একটি কাস্টম স্লাইড ইন অ্যানিমেশন তৈরি করা হয়েছে।

home.page.ts:

import { Component } from '@angular/core';
import { trigger, transition, style, animate } from '@angular/animations';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
  animations: [
    trigger('slideIn', [
      transition(':enter', [
        style({ transform: 'translateX(100%)' }),
        animate('500ms ease-out', style({ transform: 'translateX(0%)' }))
      ]),
    ]),
  ],
})
export class HomePage {
  showElement = false;

  toggleElement() {
    this.showElement = !this.showElement;
  }
}

home.page.html:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Custom Animations
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-button (click)="toggleElement()">Toggle Element</ion-button>
  
  <div *ngIf="showElement" [@slideIn]>
    <p>This element slides in from the right!</p>
  </div>
</ion-content>

এখানে:

• @slideIn অ্যানিমেশনটি তৈরি হয়েছে যা একটি div এলিমেন্টকে স্লাইড ইন করে ডান পাশ থেকে।
• toggleElement() মেথডটি এলিমেন্টটি শো/হাইড করতে ব্যবহৃত হয়।
• অ্যানিমেশনটি transition(':enter') ইভেন্টে কাজ করছে, যার মাধ্যমে এলিমেন্টটি দৃশ্যমান হওয়ার সময় অ্যানিমেশনটি চলে।

২.৪ Complex Animations

Angular Animation API এবং Ionic-এর সাথে আপনি অনেক জটিল অ্যানিমেশনও তৈরি করতে পারেন। উদাহরণস্বরূপ, কয়েকটি কম্পোনেন্ট একসাথে অ্যানিমেট করতে, টাইমলাইন ভিত্তিক অ্যানিমেশন তৈরি করতে, অথবা keyframes ব্যবহার করতে পারেন।

trigger('complexAnimation', [
  transition(':enter', [
    style({ opacity: 0 }),
    animate('300ms ease-in', style({ opacity: 1 })),
  ]),
]),

সারাংশ

• Gesture Control: Ionic এ GestureController ব্যবহার করে আপনি বিভিন্ন ধরনের জেসচার যেমন ট্যাপ, স্লাইড, পিন্চ ইত্যাদি শনাক্ত করতে পারেন এবং সেই অনুযায়ী অ্যাপের প্রতিক্রিয়া তৈরি করতে পারেন।
• Custom Animations: Ionic অ্যাপে Angular Animation API ব্যবহার করে কাস্টম অ্যানিমেশন তৈরি করা হয়। অ্যানিমেশনগুলো সহজে এবং দ্রুত তৈরি করা যায় এবং তা ইউজারের ইন্টারঅ্যাকশন ও অভিজ্ঞতা উন্নত করতে সহায়ক।

এগুলি ছিল Gesture Control এবং Custom Animations ব্যবহার করার জন্য Ionic অ্যাপে ধাপগুলো।